<template>
  <div class="container">

<el-dialog title="创建用户" :visible="isdialog" @close="isDialogClose" >

  <el-form :model="companyInfo" label-width="120px" :rules="rules" ref="ruleForm">
    <el-form-item label="企业名称"  prop="shortName">
      <el-input v-model="companyInfo.shortName" style="width:70%"></el-input>
    </el-form-item>
    <el-form-item label="所属公司"  prop="company">
     <el-input v-model="companyInfo.company" autocomplete="off" style="width:70%"></el-input>
    </el-form-item>
    <el-form-item  label="是否为名企"  prop="delivery">
      <el-switch v-model="companyInfo.isFamous"></el-switch>
     </el-form-item>
    <el-form-item label="城市"   prop="province">
      <el-select v-model="companyInfo.province" placeholder="请选择" @change="changCity" style="width:35%">
        <el-option
        v-for="(item,index) in options"
        :key="index"
        :label="item"
        :value="item">
        </el-option>
      </el-select>
      <el-select v-model="companyInfo.city" placeholder="请选择" style="width:35%">
         <el-option
        v-for="(item,index) in cityList"
        :key="index"
        :label="item"
        :value="item">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="方向(企业标签)" prop="tags">
     <el-input v-model="companyInfo.tags" autocomplete="off" style="width:70%"></el-input>
    </el-form-item>
      <el-form-item label="备注"  prop="remarks">
        <el-input type="textarea" v-model="companyInfo.remarks" placeholder="请输入内容"   style="width:70%"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isDialogClose">取 消</el-button>
    <el-button type="primary" @click="isOK">确 定</el-button>
  </div>

</el-dialog>

  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { add, detail, update } from '@/api/hmmm/companys'
export default {
  props: {
    isdialog: {
      type: Boolean,
      default: false
    },
    isAdd: {
      type: Boolean
    },
    companyById: {
      type: [Array, Object],
      required: true
    }
  },
  data () {
    return {
      // 公司信息
      companyInfo: {
        isFamous: 'false',
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remaks: ''
      },
      options: [],
      cityList: [],
      rules: {
        shortName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        province: [{ required: true, message: '请选择地区', trigger: 'change' }],
        tags: [{ required: true, message: '请输入企业标签', trigger: 'blur' }],
        company: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入1-50字符', trigger: 'blur' }]

      }
    }
  },
  created () {
    // 获取城市
    this.provinces()
    if (!this.isAdd) {
      this.detail()
    }
  },
  methods: {
    provinces () {
      const data = provinces()
      this.options = data
    },
    changCity (val) {
      this.cityList = citys(val)
      console.log(this.companyInfo.province)
    },
    isDialogClose () {
      this.$refs.ruleForm.resetFields()
      this.$emit('update:isdialog', false)
    },
    isOK () {
      this.$refs.ruleForm.validate(async val => {
        if (val) {
          if (this.isAdd) {
            // 添加
            await add(this.companyInfo)
            this.$message.success('添加成功')
          } else {
            // 编辑
            await update(this.companyInfo)
            this.$message.success('修改成功')
          }
          this.$emit('getCompanyList')
          this.$emit('update:isdialog', false)
        }
      })
    },
    async detail () {
      const { data } = await detail(this.companyById)
      this.companyInfo = data
      this.companyInfo.isFamous = this.companyInfo.isFamous === 1
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body{
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    margin-left: 90px;
}
 ::v-deep .el-dialog__footer{
  text-align: center;
}
</style>
